/*
 * @Author: your name
 * @Date: 2021-12-23 13:43:03
 * @LastEditTime: 2021-12-23 14:42:22
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day12 ts 路由 月考\my-app\src\router\RouterView.js
 */
import {Switch,Route,Redirect} from "react-router-dom"
import {Suspense} from "react"

import {Routertype} from "./Router.d"
 
const RouterView = (props:Routertype) => {
    // console.log(props);
    let {RouterList}=props
    let routerList=RouterList.filter(item=>!item.to)
    let redirect=RouterList.filter(item=>item.to)[0]
    return (
        <Suspense fallback={<div>lodding...</div>}>
            <Switch>
                {
                    routerList&&routerList.length?routerList.map((item,index) => {
                        return <Route path={item.path} key={index} render={(props)=>{
                            let Son=item.component
                            if(item.children){
                                return <Son {...props} RouterList={item.children} navLink={item.children.filter(item=>!item.to)}/>
                            }
                            return <Son {...props}/>
                        }}/>
                    }):<div>暂无数据</div>
                }
                {
                    redirect&&<Redirect from={redirect.path} to={redirect.to as string}/>
                }
            </Switch>
        </Suspense>
    );
}
 
export default RouterView;